<template>
  <div ref="pieRef" class="visit-app" style="width: 100%; height: 100%"></div>
</template>

  <script>
import * as echarts from "echarts";
import { mapState } from "vuex";

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  computed: {
    ...mapState(["theme"]),
  },
  methods: {
    initChart() {
      // 初始化对象
      this.chartInstance = echarts.init(this.$refs.pieRef, this.theme);
      let option = {
        animation: false,
        graphic: {
          elements: [
            {
              type: "image",
              z: 1,
              style: {
                image: require("../../../assets/images/asimgs/zcej001@2x.png"),
                width: 260,
                height: 260,
              },
              left: "center",
              top: "center",
              position: [0, 0],
            },
          ],
        },

        title: {
          x: "center",
          y: "center",
          //title中的rich属性
          text: "{a|这段文本采用样式a}\n{b|这段文本采用样式b}\n这段用默认样式{x|这段用样式x}",
          show: true,
          textStyle: {
            //主标题文本样式
            color: "red",
            fontFamily: "幼圆",
            lineHeight: 20,
            rich: {
              a: {
                color: "red",
                fontSize: "12",
                height: 15,
                width: 15,
              },
              b: {
                color: "yellow",
                fontSize: "12",
              },
            },
          },
        },

        series: [
          {
            type: "pie",
            radius: ["42%", "43%"],

            hoverAnimation: false,
            emphasis: {
              //使用emphasis
              disable: false,
              scale: false, //不缩放
              scaleSize: 0, //为了防止失效直接设置未0
            },
            data: [
              {
                value: 100,
                name: "CityE",
                labelLine: {
                  length: 80,
                  length2: 0,
                },
                label: {
                  x: "center",
                  y: "center",
                  formatter: [
                    "{abg|{title|3545\n123}}",
                    "  {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}",
                    "{hr|}",
                    "  {Sunny|}{value|202}{rate|55.3%}",
                    "  {Cloudy|}{value|142}{rate|38.9%}",
                    "  {Showers|}{value|21}{rate|5.8%}",
                  ].join("\n"),
                  backgroundColor: "#eee",
                  borderColor: "#eee",
                  borderWidth: 1,
                  borderRadius: 4,

                  rich: {
                    title: {
                      color: "#eee",
                      align: "center",
                    },
                    abg: {
                      backgroundColor: "#333",
                      width: "100%",
                      align: "right",
                      height: 40,
                      borderRadius: [4, 4, 0, 0],
                    },
                    Sunny: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        // image: weatherIcons.Sunny,
                      },
                    },
                    Cloudy: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        // image: weatherIcons.Cloudy,
                      },
                    },
                    Showers: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        // image: weatherIcons.Showers,
                      },
                    },
                    weatherHead: {
                      color: "#333",
                      height: 24,
                      align: "left",
                    },
                    hr: {
                      borderColor: "#777",
                      width: "100%",
                      borderWidth: 0.5,
                      height: 0,
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "left",
                    },
                    valueHead: {
                      color: "#333",
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "center",
                    },
                    rate: {
                      width: 40,
                      align: "right",
                      padding: [0, 10, 0, 0],
                    },
                    rateHead: {
                      color: "#333",
                      width: 40,
                      align: "center",
                      padding: [0, 10, 0, 0],
                    },
                  },
                },
              },

            ]
          },
        ],
      };
      this.chartInstance.setOption(option);
      this.chartInstance.on("click", (param) => {
      });
    },
  },
  mounted() {
    this.initChart();

    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
  watch: {
    theme(newValue, oldValue) {
      this.chartInstance.dispose();
      this.initChart();
    },
  },
};
</script>

  <style lang="scss" scoped>
.visit-app {
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>
